<template>
	<view class="count">
		<!-- 顶部 -->
		<view class="u-p-40">
			<u-row>
				<u-col span="3">
					<u-icon name="arrow-left" color="#ffffff" size="48" @click="goBack"></u-icon>
				</u-col>
				<u-col span="6" v-for="(item,index) in songs" :key="index">
					<u-notice-bar mode="horizontal" font-size="40" bg-color="#cbcacd" :volume-icon="false"
						:list="item.name" color="#ffffff"></u-notice-bar>
					<view class="u-text-center white text_is_beyond">{{item.singer}}</view>
				</u-col>
				<u-col span="3">
					<view class="u-text-center u-font-35 white">
						<view class="">
							评论
						</view>
						<view class="">(999)</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 碟片 -->
		<view class="circle">
			<view class="vertical">
				<u-avatar size="480" :src="img"></u-avatar>
			</view>
		</view>
		<!-- 播放器 -->
		<view class="">
			<!-- 	<slider :value="0" block-size="12" activeColor="#fff"></slider>
			<view class="u-red play">
				<u-icon name="pause" color="#ffffff" v-if="show" @click = "show=!show"
					size="50" class="vertical"></u-icon>
				<u-icon name="play-right-fill" v-if="!show"  @click = "show=!show"
					class="vertical" color="#ffffff" size="50" ></u-icon>
			</view> -->
	<!-- 		<view class="page-section page-section-gap" style="text-align: center;">
				<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
					:author="current.author" :action="audioAction" controls></audio>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				songs: [],
				img: '',
				show: true
			}
		},
		onLoad(option) {
			let id = option.id;
			uni.request({
				url: "https://www.codeman.ink/api/song/detail",
				data: {
					ids: 1915878785
				},
				method: "GET",
				success: (res) => {
					res.data.songs.forEach((item, index) => {
						let news = {};
						news.name = [];
						news.name.push(item.name + "(" + item.alia + ")");
						news.singer = '';
						item.ar.forEach((value, num) => {
							if (num + 1 != item.ar.length) {
								news.singer += value.name + '/';
							} else {
								news.singer += value.name;
							}
						})
						this.img = item.al.picUrl;
						news.time = item.dt;
						this.songs.push(news);
					})

				}
			})
			uni.request({
				url: "https://www.codeman.ink/api/song/url",
				data: {
					id: 1915878785
				},
				method: "GET",
				success: (res) => {
					// console.log(res.data);
				}
			})
		}

	}
</script>

<style>
	.count {
		background-color: #cbcacd;
	}

	.white {
		color: #FFFFFF;
	}

	.circle {
		width: 520rpx;
		height: 520rpx;
		border: 6rpx solid #FFFFFF;
		border-radius: 260rpx;
		margin: 100rpx auto;
	}

	.vertical {
		position: relative;
		left: 50%;
		top: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
	}

	.play {
		margin: auto;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 50rpx;
	}
</style>
